<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页示例</title>
    <style type="text/css">
        * {
                    padding: 0;
                    margin: 0;
                }
    
                html,
                body {
                    height: 100%;
                }
    
                body {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    /* 渐变色网站： https://webgradients.com/*/
                    background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
                    /* 渐变换图片 */
                }
        </style>
	<script type="text/javascript" src="js/xhr.js"></script>
	<script type="text/javascript">
		function init() {
			refresh();
		}
		function shuaxin() {
			//这里是请求协议，需要根据双方约定来
			var post_req =
			{
				"type": 1,
			};
			console.log('%s ', post_req)
			// printf("%s",post_req);
			XHR.post('cgi-bin/web.cgi', JSON.stringify(post_req),
				function (x, info) {
					for (var i = 0; i < info.data.length; i++) {

						if (info.data[i].key == 101) {
							document.getElementById('1001').value = info.data[i].val;
						}
						else if (info.data[i].key == 102) {
							document.getElementById('1002').value = info.data[i].val;
						}
                        else if (info.data[i].key == 104) {
							document.getElementById('1004').value = info.data[i].val;
						}
						else if (info.data[i].key == 302) {
							document.getElementById('1006').value = info.data[i].val;
						}
						else if (info.data[i].key == 303) {
							document.getElementById('1007').value = info.data[i].val;
						}
						else if (info.data[i].key == 304) {
							document.getElementById('1008').value = info.data[i].val;
						}
						else if (info.data[i].key == 301) {
							document.getElementById('1005').value = info.data[i].val;
						}
					}
					//把界面中ID为"temp"的组件的值赋值成回复json的data数组的某个值
					// document.getElementById('temp').value = info.data[0].val;
				}
			);
		}
	</script>
</head>

<body onload="init()">
	<center>
		<h1>边缘网管系统</h1>
		</div>
		<h2>modbus采集</h2>
		点击刷新数据：
		<input type="button" name="wenan" value="见到你很高兴" id="1000" onclick="shuaxin()">
		<br>
		温度：<input type="text" name="wendu" value="XXX" id="1001">
		<br>
        湿度：<input type="text" name="shidu" value="XXX" id="1002">
        <br>
        空调温度：<input type="text" name="airtem" value="XXX" id="1004">
	</center>

</body>

</html>